<script setup lang="ts">
import { reactive, toRefs, ref, onMounted } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'
import login from '@/components/login.vue'
import { useUserState, type typeUserInfo } from '@/store/userState'
import { onBeforeRouteLeave } from 'vue-router'
const userState = useUserState()
const userInfo = ref<typeUserInfo>()
onMounted(async () => {
  userInfo.value = await userState.getUserInfo() as typeUserInfo
})

const state = reactive({
  circleUrl: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
})

const { circleUrl } = toRefs(state)

const showPopover = ref(false)
function mouseenter() {
  showPopover.value = true
}

function mouseout() {
  showPopover.value = false
}

const showLoginBox = ref(false)

async function loginOut() {
  await userState.loginOut()
  window.location.reload()
}

function login_() {
  if (userInfo.value) {
    window.open('/user/home')
    return
  }
  showLoginBox.value = !userInfo.value
}
</script>

<template>
  <div class="box">
    <div>
      <el-avatar v-if="userInfo" class="icon" size="40px" :src="userInfo.avatarUrl" />
      <el-avatar v-else class="icon" size="40px" :src="circleUrl" />
    </div>
    <div class="popover" @mouseenter="mouseenter" @mouseleave="mouseout" @click="login_">
      <Transition v-if="userInfo">
        <div class="popoverBox" v-if="showPopover">
          <div style="display: flex; align-items: center">
            <el-avatar class="icon" size="40px" :src="userInfo.avatarUrl" />
            <div class="popoverValue">
              <div class="loginTitle">
                <div>{{ userInfo.username }}</div>
              </div>
              <div class="loginInfo">感谢您使用面视频 ~</div>
            </div>
          </div>
          <div style="margin-top: 15px">
            <button class="out-button" @click.stop="loginOut">退出登录</button>
          </div>
        </div>
      </Transition>
      <Transition v-else>
        <div class="popoverBox" v-if="showPopover" @click="showLoginBox = true">
          <div style="display: flex; align-items: center">
            <el-avatar class="icon" size="40px" :src="circleUrl" />
            <div class="popoverValue">
              <div class="loginTitle">
                <div>立刻登录</div>
                <el-icon><ArrowRight /></el-icon>
              </div>
              <div class="loginInfo">同步多端观看记录 多人在线剧集讨论</div>
            </div>
          </div>
        </div>
      </Transition>
    </div>
  </div>
  <login @close="showLoginBox = false" :show="showLoginBox"></login>
</template>

<style scoped lang="less">
.v-enter-active,
.v-leave-active {
  transition: 0.2s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

.popover {
  // display: none;
  position: absolute;
  right: 0;
  margin-right: 40px;
  margin-top: 20px;

  .popoverBox {
    // display: flex;
    // align-items: center;
    cursor: pointer;
    background: rgba(0, 0, 0, 0.9);
    padding: 20px;
    border-radius: 10px;
    position: relative;
    min-width: 300px;

    .popoverValue {
      padding-left: 10px;

      .loginTitle {
        display: flex;
        align-items: center;
        font-size: 17px;
        color: #fff;
      }

      .loginInfo {
        font-size: 12px;
        color: #aaa;
      }
    }

    &::before {
      display: block;
      content: '';
      width: 0;
      height: 0;
      border-bottom: 10px solid rgba(0, 0, 0, 0.9);
      border-right: 10px solid transparent;
      border-left: 10px solid transparent;
      position: absolute;
      top: -10px;
      right: 30px;
    }
  }

  &::after {
    display: block;
    content: '';
    position: absolute;
    top: -70px;
    right: 10px;
    // background: #f00;
    width: 60px;
    height: 70px;
    cursor: pointer;
  }
}
.icon {
  cursor: pointer;
}

.out-button {
  width: 100%;
  font-size: 13px;
  padding: 5px 10px;
  border-radius: 70px;
  background: rgba(1, 206, 205, 1);
  cursor: pointer;
}

.router-link-active {
  text-decoration: none;
}

a {
  text-decoration: none;
}
</style>
